<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侵权损害法规解读</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f8f9fc;
        }
        .stats-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .storage-info {
            text-align: center;
            padding: 20px;
        }
        .storage-chart {
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        .storage-details {
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }
        .law-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .law-card:hover {
            background: #e9ecef;
            transform: translateY(-2px);
        }
        .law-icon {
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 左侧统计信息 -->
            <div class="col-md-4">
                <!-- 侵权数据占比图表 -->
                <div class="stats-card mb-4">
                    <h5 class="mb-3">侵权数据占比</h5>
                    <div id="dataRatioChart" style="height: 300px;"></div>
                </div>
                <!-- 法规存储信息 -->
                <div class="stats-card">
                    <h5 class="mb-3">法规存储</h5>
                    <div class="storage-info">
                        <div id="storageChart" class="storage-chart"></div>
                        <div class="storage-details">
                            <div>已用空间：50.2 GB</div>
                            <div class="mt-2">
                                <div>侵权法规：12 files (9 MB)</div>
                                <div>解读资料：8 files (7 MB)</div>
                                <div>案例视频：2 files (17 MB)</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧法规内容 -->
            <div class="col-md-8">
                <!-- 搜索表单 -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <input type="text" class="form-control" placeholder="法规名称">
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control" placeholder="法规编号">
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control" placeholder="发布时间">
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control" placeholder="适用范围">
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control" placeholder="解读要点">
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-primary w-100">检索</button>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-outline-secondary w-100">新增</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 法规列表 -->
                <div class="card">
                    <div class="card-body">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>法规名称</th>
                                    <th>法规编号</th>
                                    <th>发布时间</th>
                                    <th>适用范围</th>
                                    <th>解读要点</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>《关于审理利用信息网络侵害人身权益的法律条文》</td>
                                    <td>法释〔2024〕10号</td>
                                    <td>2024年5月1日颁布</td>
                                    <td>利用信息网络侵害人身权益案件</td>
                                    <td>对个人隐私信息保护任何违背规定</td>
                                    <td>
                                        <button class="btn btn-sm btn-primary">编辑</button>
                                        <button class="btn btn-sm btn-warning">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>《网络数据安全管理条例》</td>
                                    <td>国信办发〔2025〕1号</td>
                                    <td>2025年1月15日颁布</td>
                                    <td>适用于在中华人民共和国境内利用网络开展数据处理活动</td>
                                    <td>结合各领域特点，落实数据安全保护</td>
                                    <td>
                                        <button class="btn btn-sm btn-primary">编辑</button>
                                        <button class="btn btn-sm btn-warning">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>共 2 条</div>
                            <div class="d-flex align-items-center">
                                <ul class="pagination mb-0">
                                    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                                </ul>
                                <select class="form-select ms-2" style="width: auto;">
                                    <option>5 条/页</option>
                                    <option>10 条/页</option>
                                    <option>20 条/页</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 在表格后面、</body>前添加以下代码 -->
    <script src="js/dataHandler.js"></script>
    <script>
        // 模拟法规解读数据
        const mockLegalData = Array.from({length: 150}, (_, index) => ({
            id: index + 1,
            regulationId: `L${String(index + 1).padStart(3, '0')}`,
            title: ['个人信息保护法解读', '数据安全法解读', '民法典隐私权条款解读', '网络安全法解读'][Math.floor(Math.random() * 4)],
            category: ['信息保护', '数据安全', '隐私权', '网络安全'][Math.floor(Math.random() * 4)],
            publishDate: new Date(2024, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28)).toLocaleDateString(),
            source: ['最高法院', '地方法院', '专家解读', '行业指南'][Math.floor(Math.random() * 4)],
            applicableScope: ['全国范围', '特定行业', '区域性', '试点范围'][Math.floor(Math.random() * 4)],
            compensationStandard: `${Math.floor(Math.random() * 50000) + 5000}元`,
            updateTime: new Date(2024, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28)).toLocaleDateString(),
            status: ['有效', '待更新', '已修订'][Math.floor(Math.random() * 3)]
        }));
    
        const dataHandler = new DataHandler(mockLegalData);
    
        // 渲染表格数据
        function renderTable() {
            const {data, total, currentPage, totalPages} = dataHandler.getPageData();
            const tbody = document.querySelector('tbody');
            tbody.innerHTML = data.map(item => `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.regulationId}</td>
                    <td>${item.title}</td>
                    <td>${item.category}</td>
                    <td>${item.publishDate}</td>
                    <td>${item.source}</td>
                    <td>${item.applicableScope}</td>
                    <td>${item.compensationStandard}</td>
                    <td>${item.updateTime}</td>
                    <td>
                        <span class="badge ${item.status === '有效' ? 'bg-success' : 
                                      item.status === '待更新' ? 'bg-warning' : 'bg-info'}">
                            ${item.status}
                        </span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-primary" onclick="editItem(${item.id})">编辑</button>
                        <button class="btn btn-sm btn-warning" onclick="deleteItem(${item.id})">删除</button>
                    </td>
                </tr>
            `).join('');
    
            // 更新分页信息
            document.querySelector('.pagination').innerHTML = `
                <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${currentPage - 1})">上一页</a>
                </li>
                ${Array.from({length: totalPages}, (_, i) => i + 1).map(page => `
                    <li class="page-item ${page === currentPage ? 'active' : ''}">
                        <a class="page-link" href="#" onclick="changePage(${page})">${page}</a>
                    </li>
                `).join('')}
                <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${currentPage + 1})">下一页</a>
                </li>
            `;
    
            document.querySelector('.d-flex > div:first-child').textContent = `共 ${total} 条`;
        }
    
        // 分页切换
        function changePage(page) {
            if (page < 1 || page > Math.ceil(dataHandler.data.length / dataHandler.pageSize)) return;
            dataHandler.setPage(page);
            renderTable();
        }
    
        // 删除数据
        function deleteItem(id) {
            if (confirm('确定要删除这条记录吗？')) {
                dataHandler.delete(id);
                renderTable();
            }
        }
    
        // 编辑数据
        function editItem(id) {
            const item = dataHandler.data.find(item => item.id === id);
            const newStandard = prompt('请输入新的赔偿标准：', item.compensationStandard);
            if (newStandard !== null) {
                dataHandler.update(id, {
                    compensationStandard: newStandard,
                    updateTime: new Date().toLocaleDateString(),
                    status: '已修订'
                });
                renderTable();
            }
        }
    
        // 添加数据
        document.querySelector('button.btn-outline-secondary').onclick = function() {
            const newItem = {
                regulationId: `L${String(dataHandler.data.length + 1).padStart(3, '0')}`,
                title: '新增法规解读',
                category: '信息保护',
                publishDate: new Date().toLocaleDateString(),
                source: '专家解读',
                applicableScope: '全国范围',
                compensationStandard: '10000元',
                updateTime: new Date().toLocaleDateString(),
                status: '待更新'
            };
            dataHandler.add(newItem);
            renderTable();
        };
    
        // 初始化渲染
        renderTable();
    
        // 每页显示条数变化处理
        document.querySelector('.form-select').addEventListener('change', function(e) {
            dataHandler.setPageSize(parseInt(e.target.value));
            renderTable();
        });
    </script>
    <script>
        function initCharts() {
            // 初始化侵权数据占比图表
            const dataRatioChart = echarts.init(document.getElementById('dataRatioChart'));
            dataRatioChart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 50, name: '侵权法规文档', itemStyle: { color: '#4e73df' } },
                        { value: 30, name: '法规解读资料', itemStyle: { color: '#1cc88a' } },
                        { value: 20, name: '其他资料', itemStyle: { color: '#36b9cc' } }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            });

            // 初始化存储空间图表
            const storageChart = echarts.init(document.getElementById('storageChart'));
            storageChart.setOption({
                series: [{
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    radius: '100%',
                    itemStyle: {
                        color: '#4e73df'
                    },
                    progress: {
                        show: true,
                        width: 18
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            width: 18
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}%',
                        offsetCenter: [0, '0%']
                    },
                    data: [{
                        value: 50.2
                    }]
                }]
            });
        }

        // DOM加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', initCharts);

        // 使用防抖函数优化窗口调整时的图表重绘
        function debounce(fn, delay) {
            let timer = null;
            return function() {
                clearTimeout(timer);
                timer = setTimeout(() => fn.apply(this, arguments), delay);
            }
        }

        // 优化后的窗口调整处理
        const handleResize = debounce(function() {
            const charts = ['dataRatioChart', 'storageChart'].map(id => 
                echarts.getInstanceByDom(document.getElementById(id))
            );
            charts.forEach(chart => chart && chart.resize());
        }, 100);

        window.addEventListener('resize', handleResize);
    </script>
</body>
</html>